<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/layouts/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>编辑文章</title>
<!--引入wangEditor.css-->
<link rel="stylesheet" type="text/css" href="${ctxLib }/wangEditor/dist/css/wangEditor.min.css">
<!-- 引入webuploader -->
<link href="${ctxLib }/jquery.fileUpload/css/jquery.fileupload.css" rel="stylesheet" type="text/css" />
<style type="text/css">  
	.bar {
		margin-top:5px;
	    height: 18px;
	    background: green;
	}
</style>
</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" id="form-article-add">
		<input type="hidden"  name="id"  id="id"  value="${article.id }"  />
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章标题：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text radius" value="${article.title }" placeholder="" id="title" name="title">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">副标题：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text radius" value="${article.subtitle }" placeholder="" id="subtitle" name="subtitle">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>所属栏目：</label>
			<div class="formControls col-xs-8 col-sm-9"> ${article.categoryName }
			<input type="hidden"  value="${article.categoryId }"  id="categoryId" name="categoryId">
			</div>
		</div>
		<!-- 
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章类型：</label>
			<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select name="articletype" class="select">
					<option value="0">全部类型</option>
					<option value="1">帮助说明</option>
					<option value="2">新闻资讯</option>
				</select>
				</span> </div>
		</div> -->
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">排序值(值越小就越往前排)：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text radius" value="${article.sort }" placeholder="" id="sort" name="sort">
			</div>
		</div>
		<!-- 
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">关键词：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="keywords" name="keywords">
			</div>
		</div> -->
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">文章摘要：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea name="abstracts" cols="" rows="" class="textarea"  placeholder="这里是文章摘要..." datatype="*10-100" dragonfly="true"  onKeyUp="$.Huitextarealength(this,200)">${article.abstracts }</textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">文章作者：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text  radius"  value="${article.author }" placeholder="" id="author" name="author">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">文章来源：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text  radius" value="${article.source }" placeholder="" id="source" name="source">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">允许评论：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<div class="check-box">
					<input type="checkbox" id="isAllowcomments" name="isAllowcomments" <c:if  test="${article.isAllowcomments }">checked="checked"</c:if> >
					<label for="checkbox-pinglun">&nbsp;</label>
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">缩略图：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div id="files" class="files">
					<c:if test="${article.thumImg != null && article.thumImg != '' }">
						<img  style="width:400px" src="${article.thumImg }">
						<input type="hidden" name="thumImg" value="${article.thumImg }">
					</c:if>	
				</div>
				<span class="btn btn-secondary radius mt-5  fileinput-button">
			        <i class="Hui-iconfont">&#xe600;</i>
			        <span>选择文件</span>
			        <!-- The file input field used as target for the file upload widget -->
			        <input id="fileupload" type="file" name="upfile" multiple>
			    </span>
				<div id="progress">
    				<div class="bar" style="width: 0%;"></div>
				</div>
				
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">文章内容2：</label>
			<div class="formControls col-xs-8 col-sm-9"> 
				<div id="content" style="height:800px;">${article.content }</div>
			</div>
		</div>
		
		<c:forEach items="${fns:getFieldList(article.categoryId)}"  var="field">
			<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">${field.showName }：</label>
			<div class="formControls col-xs-8 col-sm-9  <c:if test="${field.labelValue == 'radio' }"> skin-minimal</c:if>"> 
				<c:choose>
					<c:when test="${field.labelValue == 'text' }">
						<input type="text" class="input-text  radius  self-field" value="${fns:getFieldArticle(article.id,field.enName) }" placeholder="请输入${field.showName }" id="${field.enName }" name="${field.enName }">
					</c:when>
					<c:when test="${field.labelValue == 'textarea' }">
						<div id="${field.enName }" style="height:500px"  class="content_field">${fns:getFieldArticle(article.id,field.enName) }</div>
					</c:when>
					<c:when test="${field.labelValue == 'upload' }">
						<div id="files_${field.enName }" class="files">
							<c:if test="${fns:getFieldArticle(article.id,field.enName) != null && fns:getFieldArticle(article.id,field.enName) != '' }">
								<img  style="width:400px" src="${fns:getFieldArticle(article.id,field.enName) }">
								<input type="hidden" name="${field.enName }" value="${fns:getFieldArticle(article.id,field.enName) }">
							</c:if>
						</div>
						<span class="btn btn-secondary radius mt-5  fileinput-button">
					        <i class="Hui-iconfont">&#xe600;</i>
					        <span>选择文件</span>
					        <!-- The file input field used as target for the file upload widget -->
					        <input id="${field.enName }" type="file" name="upfile"  class="upload_field" multiple>
					    </span>
						<div class="progress"  id="${field.enName }_progress"  >
							<div class="progress-bar">
								<span class="sr-only" style="width:0%"></span>
							</div>
						</div>
					</c:when>
					<c:when test="${field.labelValue == 'radio' }">
						<c:forEach	items="${fn:split(field.defaultValue,',') }"  var="fname">
							<div class="radio-box">
							    <input type="radio"  name="${field.enName }"  class="self-field"  value="${fname }"  
							    <c:if test="${fname == fns:getFieldArticle(article.id,field.enName) }">checked</c:if>>
							    <label for="${field.enName }">${fname }</label>
							 </div>
						</c:forEach>
					</c:when>
					<c:when test="${field.labelValue == 'select' }">
						<select class="select  self-field" size="1" name="${field.enName }"  id="${field.enName }">
							<option value="" >请选择${field.showName }</option>
							<c:forEach	items="${fn:split(field.defaultValue,',') }"  var="fname">
								 <option value="${fname }"  <c:if test="${fname == fns:getFieldArticle(article.id,field.enName) }">selected</c:if>>${fname }</option>
							</c:forEach>
						</select>
					</c:when>
				</c:choose>
			</div>
		</div>
		</c:forEach>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存文章</button>
				<button onClick="article_save();" class="btn btn-secondary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存并发布文章</button>
				<button onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
			</div>
		</div>
	</form>
</article>	
	<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${ctxLib }/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${ctxLib }/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${ctxStatic }/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="${ctxStatic }/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${ctxLib }/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="${ctxLib }/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="${ctxLib }/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="${ctxLib }/jquery.fileUpload/js/vendor/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="${ctxLib }/jquery.fileUpload/js/jquery.iframe-transport.js"></script> 
<script type="text/javascript" src="${ctxLib }/jquery.fileUpload/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="${ctxLib }/shopUtil.js?v=1.0"></script>
<script type="text/javascript" src="${ctxLib }/wangEditor/dist/js/wangEditor.js?v=1.0"></script>
<script type="text/javascript">
$(function(){
	var editor = createEditor('content');
	$('.content_field').each(function(){
		var f_editor = createEditor($(this).attr('id'));
	});
	createUploader('fileupload','progress');
	$('.upload_field').each(function(){
		var id = $(this).attr('id');
		createUploader(id,id+'_progress');
	});
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	$("#form-article-add").validate({
		rules:{
			title:{
				required:true,
				minlength:2,
				maxlength:50
			},
			sort:{
				digits:true
			}
		},
		messages: {
			title: {
		        required: "请输入文章标题"
		      }
	    },
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
				var formData = getArticleJson();
				if($('input[name="isAllowcomments"]').prop("checked")){
					formData.isAllowcomments = true;
		        }else{
		        	formData.isAllowcomments = false;
		        }
				var m = createEditor('content');
				// 获取编辑器区域完整html代码
		        formData.content = m.$txt.html();
				$.ajax({
                    type: 'POST',
                    url: $ctx + '/a/article/edit',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(formData),
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            layer.alert('编辑成功', {
                            	  closeBtn: 0
                            }, function(){
                            	window.parent.location.reload();
                            	var index = parent.layer.getFrameIndex(window.name);
                            	parent.layer.close(index);
                           	});
                        } else {
                            layer.alert(data.message);
                        }
                    }
                });
			}
		});
});

function getArticleJson(){
	var form = $('#form-article-add');
	var result = {};
	var selfField = new Array();
	form.find('input,textarea,select').each(function () {
        var name = $(this).attr('name');
        var tclass = $(this).attr('class');
        if(tclass !=null && tclass.indexOf("self-field")>=0) {
        	var field = {};
        	if ("" == name || undefined == name) return;
            if(this.type == 'radio' && !this.checked)return;
            if(this.value == null || this.value == '') return;
            field.fieldEnName = name;
            field.content = $(this).val();
            selfField.push(field);
        }else{
        	if ("" == name || undefined == name) return;
            if(this.type == 'radio' && !this.checked)return;
            result[name] = $(this).val();
        }
    });
	$('.content_field').each(function(){
		var f_editor = createEditor($(this).attr('id'));
		var field = {};
		field.fieldEnName = $(this).attr('id');
        field.content = f_editor.$txt.html();
        selfField.push(field);
	});
	result.selfField = selfField;
	return result;
}

function createEditor(id){
	var editor = new wangEditor(id);
	editor.config.uploadImgFileName = 'upfile';
	editor.config.uploadImgUrl = '${ctxBase}/file/wang';
    // 关闭菜单栏fixed
    editor.config.menuFixed = false;
    editor.create();
    return editor;
}

function createUploader(fileid,progress){
	$('#'+progress).hide();
	$('#'+progress+' .sr-only').css('width','0%');
	$('#'+fileid).fileupload({
		url: "${ctxBase}/file/uploadfile",
        dataType: 'json',
        done: function (e, data) {
        	$('#'+progress).hide();
        	$('#'+progress+' .sr-only').css('width','0%');
            $.each(data.files, function (index, file) {
            	if(data.result.success){
            		var name = fileid == "fileupload"?"thumImg":fileid;
            		var tclass = fileid == "fileupload"?"":"class =\'self-field\'";
            		$('#files_'+fileid).html('<img  style=\'width:400px\' src=\''+data.result.data.url+'\'>'
            		+'<input type=\'hidden\' '+tclass+' name=\''+name+'\' value=\''+data.result.data.url+'\'>');
            	}else{
            		layer.alert(data.result.message);
            	}
            });
        },
        progressall: function (e, data) {
        	$('#'+progress).show();
            var progress1 = parseInt(data.loaded / data.total * 100, 10);
            $('#'+progress+' .sr-only').css(
                'width',
                progress1 + '%'
            );
        }
    });
}

</script>
</body>
</html>